import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface WaterfallProps {
    chartId?: string;
    width?: string;
    height?: string;
    title?: object;
    grid?: object;
    seriesName?: string;
    xAxisData?: string[];
    seriesData?: number[][];
}

@customElement('lit-waterfall')
export class LitWaterfall extends LitElement {
    @property({type: String}) chartId: string = 'lit-waterfall-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Object}) title: any = {
        text: 'Waterfall Chart',
        subtext: 'Living Expenses in Shenzhen'
    };
    @property({type: Object}) grid: any = {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    };
    @property({type: String}) seriesName: string = 'Life Cost';
    @property({type: Array}) xAxisData: string[] = ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other'];
    @property({type: Array}) seriesData: number[][] = [[0, 1700, 1400, 1200, 300, 0], [2900, 1200, 300, 200, 900, 300]];

    option: echarts.EChartsOption = {
        title: this.title,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params: any) {
                const tar = params[1];
                return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
            }
        },
        grid: this.grid,
        xAxis: {
            type: 'category',
            splitLine: { show: false },
            data: this.xAxisData,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Placeholder',
                type: 'bar',
                stack: 'Total',
                itemStyle: {
                    borderColor: 'transparent',
                    color: 'transparent'
                },
                emphasis: {
                    itemStyle: {
                        borderColor: 'transparent',
                        color: 'transparent'
                    }
                },
                data: this.seriesData[0]
            },
            {
                name: 'Life Cost',
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: this.seriesData[1]
            }
        ]
    };

    updated() {
        this.option.title = this.title;
        this.option.grid = this.grid;
        (this.option.xAxis as any).data = this.xAxisData;
        (this.option.series as any)[0].data = this.seriesData[0];
        (this.option.series as any)[1].data = this.seriesData[1];
        (this.option.series as any)[1].name = this.seriesName;
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    static styles = style;

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-waterfall': LitWaterfall;
    }
}